<script setup>
import {ref,watch} from 'vue'
import {useStore} from 'vuex'
import { useRouter } from 'vue-router';

    const store =useStore()
    const router =useRouter()

    const onClickLeft = () => history.back();
    const show = ref(false);
    const showPopup = () => {
      show.value = true;
    };

    // 输入框
    const inputValue = ref('')

    const isLogin =ref(false)
    isLogin.value = store.getters.isLogin

    // 退出登录
    const logout = function(){
        if(isLogin.value===true){
            store.commit('logout')
            router.push('/mine')
        }
    }

</script>
<template>
    <van-nav-bar
    title="我的设置"
    left-text="返回"
    left-arrow
    @click-left="onClickLeft"
    />
    <main class="main">
    <van-row>
        <van-col span="8"></van-col>
        <van-col span="8">
            <van-cell>
            <van-image round width="80px" height="80px" class="avator"
                src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
            <span>点击更换头像</span>
        </van-cell>
        </van-col>    
    </van-row>
    <van-cell title="账号昵称" :value="store.state.userInfo.username" @click="showPopup" />
    <van-popup v-model:show="show" >
        <van-cell-group inset>
        <van-field v-model="inputValue"  placeholder="请输入用户名" class="nameInput"  />
        <van-button round block  native-type="submit" >
        提交
        </van-button>
        </van-cell-group>
    </van-popup>
    <van-cell title="所在团队" >
    <van-field v-model="inputValue"  placeholder="暂未加入团队" class="nameInput"  />
    </van-cell>
    <van-button round block type="primary"  @click="logout">退出登录</van-button>
    </main>
</template>
<style scoped>
    .main{
        background-color: #fff;
    }
    .nameInput{
        width: 250px;height: 60px;
    }
</style>